<template>
  <div class="checkout-page">
    <!-- 页面头部 -->
    <header class="checkout-header">
      <div class="header-container">
        <div class="logo-section">
          <h1 class="store-title">
            <span class="leaf-icon">🌱</span>
            支付订单
          </h1>
        </div>
        <!-- From Uiverse.io by vinodjangid07 --> 
        <button class="button" @click="navigateTo('/buyer/index')">
          <svg class="svgIcon" viewBox="0 0 384 512">
            <path
              d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
            ></path>
          </svg>
        </button>
      </div>
    </header>

    <div class="checkout-container">
      <!-- 主要内容区域 -->
      <div class="checkout-content">
        <!-- 收货地址选择 -->
        <div class="checkout-section">
          <h2 class="section-title">
            收货地址
            <el-button type="text" @click="showAddressManager = true" class="manage-address-btn">
              管理地址
            </el-button>
          </h2>
          <div class="address-selection">
            <div
              v-for="address in userAddresses"
              :key="address.id"
              :class="['address-card', { active: selectedAddressId === address.id }]"
              @click="selectedAddressId = address.id"
            >
              <div class="address-info">
                <div class="address-header">
                  <span class="recipient">{{ address.recipient }}</span>
                  <span class="phone">{{ address.phone }}</span>
                  <span v-if="address.isDefault" class="default-tag">默认</span>
                  <span class="tag-badge" :class="getTagClass(address.tag)">
                    {{ address.tag }}
                  </span>
                </div>
                <div class="address-detail">
                  {{ address.province }} {{ address.city }} {{ address.district }} {{ address.detail }}
                </div>
              </div>
              <div class="address-actions">
                <el-button type="text" @click.stop="editAddress(address)">编辑</el-button>
              </div>
            </div>
            <div class="add-address-card" @click="showAddressManager = true">
              <div class="add-icon">+</div>
              <div class="add-text">添加新地址</div>
            </div>
          </div>
        </div>

        <!-- 订单商品 -->
        <div class="checkout-section">
          <h2 class="section-title">订单商品</h2>
          <div class="order-items">
            <div v-for="item in orderItems" :key="item.id" class="order-item">
              <img :src="item.image" :alt="item.name" class="item-image" />
              <div class="item-info">
                <h4 class="item-name">{{ item.name }}</h4>
                <p class="item-spec">{{ item.weight }}kg · {{ getCategoryName(item.category) }}</p>
              </div>
              <div class="item-quantity">×{{ item.quantity }}</div>
              <div class="item-price">¥{{ (item.price * item.quantity).toFixed(2) }}</div>
            </div>
          </div>
        </div>

        <!-- 订单备注 -->
        <div class="checkout-section">
          <h2 class="section-title">订单备注</h2>
          <div class="order-notes">
            <el-input
              v-model="orderNotes"
              type="textarea"
              :rows="3"
              placeholder="请输入订单备注（选填）"
              maxlength="200"
              show-word-limit
            />
          </div>
        </div>
      </div>

      <!-- 侧边栏 - 订单摘要 -->
      <div class="checkout-sidebar">
        <div class="order-summary">
          <h3 class="summary-title">订单摘要</h3>
          
          <div class="summary-item">
            <span>商品金额</span>
            <span>¥{{ subtotal.toFixed(2) }}</span>
          </div>
          <div class="summary-item">
            <span>配送费</span>
            <span v-if="shippingFee === 0" class="free-shipping">免费</span>
            <span v-else>¥{{ shippingFee.toFixed(2) }}</span>
          </div>
          <div class="summary-item discount">
            <span>优惠</span>
            <span>-¥{{ discount.toFixed(2) }}</span>
          </div>
          <div class="summary-total">
            <span>应付总额</span>
            <span class="total-amount">¥{{ totalAmount.toFixed(2) }}</span>
          </div>

          <!-- 支付方式 -->
          <div class="payment-methods">
            <h4 class="payment-title">支付方式</h4>
            <div class="payment-options">
              <div
                v-for="method in paymentMethods"
                :key="method.id"
                :class="['payment-option', { active: selectedPayment === method.id }]"
                @click="selectedPayment = method.id"
              >
                <div class="payment-icon">
                  <span>{{ method.icon }}</span>
                </div>
                <div class="payment-info">
                  <div class="payment-name">{{ method.name }}</div>
                  <div class="payment-desc">{{ method.description }}</div>
                </div>
                <div class="payment-radio">
                  <div :class="['radio-dot', { active: selectedPayment === method.id }]"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 支付倒计时 -->
          <div class="payment-timer" v-if="paymentTimer > 0">
            <div class="timer-info">
              <span class="timer-icon">⏰</span>
              <span>请在</span>
              <span class="timer-count">{{ formatTime(paymentTimer) }}</span>
              <span>内完成支付</span>
            </div>
            <div class="timer-warning">超时订单将自动取消</div>
          </div>

          <!-- 提交订单 -->
          <el-button
            type="primary"
            class="submit-order-btn"
            :loading="isSubmitting"
            @click="handleSubmitOrder"
            :disabled="!selectedAddressId"
          >
            {{ isSubmitting ? '提交中...' : `确认支付 ¥${totalAmount.toFixed(2)}` }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 地址管理对话框 -->
    <el-dialog
      v-model="showAddressManager"
      title="管理收货地址"
      width="600px"
    >
      <div class="address-manager">
        <div class="address-list">
          <div
            v-for="address in userAddresses"
            :key="address.id"
            :class="['address-item', { default: address.isDefault }]"
          >
            <div class="address-content">
              <div class="address-header">
                <span class="recipient">{{ address.recipient }}</span>
                <span class="phone">{{ address.phone }}</span>
                <span v-if="address.isDefault" class="default-badge">默认</span>
                <span class="tag-badge" :class="getTagClass(address.tag)">
                {{ address.tag }}
              </span>
              </div>
              <div class="address-detail">
                {{ address.province }} {{ address.city }} {{ address.district }} {{ address.detail }}
              </div>
            </div>
            <div class="address-actions">
              <el-button type="text" @click="setDefaultAddress(address.id)">设默认</el-button>
              <el-button type="text" @click="editAddress(address)">编辑</el-button>
              <el-button type="text" @click="deleteAddress(address.id)" class="delete-btn">删除</el-button>
            </div>
          </div>
        </div>
        <div class="address-actions-footer">
          <el-button type="primary" @click="addNewAddress">添加新地址</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 地址编辑对话框 -->
    <el-dialog
      v-model="showAddressEdit"
      :title="editingAddress ? '编辑地址' : '添加地址'"
      width="500px"
    >
      <el-form :model="addressForm" :rules="addressRules" ref="addressFormRef" label-width="80px">
        <el-form-item label="收货人" prop="recipient">
          <el-input v-model="addressForm.recipient" placeholder="请输入收货人姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="addressForm.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <!-- 在地址编辑对话框中添加标签选择 -->
        <el-form-item label="地址标签">
          <div class="tag-selector">
            <el-radio-group v-model="addressForm.tag">
              <el-radio 
                v-for="tag in addressTags" 
                :key="tag" 
                :label="tag"
                class="tag-radio"
              >
                {{ tag }}
              </el-radio>
            </el-radio-group>
            <el-input
              v-if="addressForm.tag === '其他'"
              v-model="addressForm.customTag"
              placeholder="请输入自定义标签"
              style="margin-top: 8px; width: 200px;"
            />
          </div>
        </el-form-item>
        <el-form-item label="所在地区" prop="region">
          <el-cascader
            v-model="addressForm.region"
            :options="regionOptions"
            placeholder="请选择所在地区"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="detail">
          <el-input
            v-model="addressForm.detail"
            type="textarea"
            :rows="3"
            placeholder="请输入详细地址"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="addressForm.isDefault">设为默认地址</el-checkbox>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddressEdit = false">取消</el-button>
        <el-button type="primary" @click="saveAddress">保存</el-button>
      </template>
    </el-dialog>

    <!-- 支付确认对话框 -->
    <el-dialog
      v-model="showPaymentDialog"
      title="确认支付"
      width="400px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="payment-dialog">
        <div class="payment-amount">
          <span class="amount-label">支付金额：</span>
          <span class="amount-value">¥{{ totalAmount.toFixed(2) }}</span>
        </div>
        <div class="payment-method">
          <span class="method-label">支付方式：</span>
          <span class="method-value">{{ getPaymentMethodName(selectedPayment) }}</span>
        </div>
        <div class="payment-tips">
          <p>请在新打开的页面中完成支付</p>
          <p>支付完成前请不要关闭此窗口</p>
        </div>
        <div class="payment-actions">
          <el-button @click="cancelPayment">取消支付</el-button>
          <el-button type="primary" @click="confirmPayment">已完成支付</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { regionOptions } from '@/utils/regionData'

const route = useRoute()
const router = useRouter()

const addressFormRef = ref(null)

// 添加预设标签选项
const addressTags = ref(['家', '公司', '学校', '父母家', '其他'])

const navigateTo = (path) => {
  router.push(path)
}
// 用户地址数据
const userAddresses = ref([
  {
    id: 1,
    recipient: '张三',
    phone: '13800138000',
    province: '北京市',
    city: '北京市',
    district: '朝阳区',
    detail: '建国路88号SOHO现代城A座1001室',
    isDefault: true,
    tag: '家'
  },
  {
    id: 2,
    recipient: '李四',
    phone: '13900139000',
    province: '上海市',
    city: '上海市',
    district: '浦东新区',
    detail: '陆家嘴环路1000号汇亚大厦',
    isDefault: false,
    tag: '公司'
  }
])

// 订单商品数据
const orderItems = ref([
  {
    id: 1,
    name: '有机西红柿',
    price: 8.5,
    quantity: 2,
    weight: 1.2,
    category: 'vegetable',
    image: 'https://images.unsplash.com/photo-1546470427-e212d0d553c3?w=300&h=200&fit=crop'
  },
  {
    id: 2,
    name: '特价土鸡蛋',
    price: 18.8,
    quantity: 1,
    weight: 0.5,
    category: 'egg',
    image: 'https://images.unsplash.com/photo-1582722872445-44dc5f7e3c8f?w=300&h=200&fit=crop'
  }
])

// 支付方式
const paymentMethods = ref([
  {
    id: 1,
    name: '微信支付',
    icon: '💚',
    description: '推荐微信用户使用'
  },
  {
    id: 2,
    name: '支付宝',
    icon: '💙',
    description: '推荐支付宝用户使用'
  },
  {
    id: 3,
    name: '银行转账',
    icon: '🏦',
    description: '支持各大银行'
  }
])

// 响应式数据
const selectedAddressId = ref(1)
const selectedPayment = ref(1)
const orderNotes = ref('')
const isSubmitting = ref(false)
const showPaymentDialog = ref(false)
const showAddressManager = ref(false)
const showAddressEdit = ref(false)
const editingAddress = ref(null)
const paymentTimer = ref(1800) // 30分钟倒计时（秒）

// 地址表单
const addressForm = ref({
  recipient: '',
  phone: '',
  region: [],
  detail: '',
  isDefault: false,
  tag: '家', // 默认标签
  customTag: '' // 自定义标签
})

const addressRules = {
  recipient: [
    { required: true, message: '请输入收货人姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  region: [
    { required: true, message: '请选择所在地区', trigger: 'change' }
  ],
  detail: [
    { required: true, message: '请输入详细地址', trigger: 'blur' }
  ],
  tag: [
    { required: true, message: '请选择地址标签', trigger: 'change' }
  ]
}

let timerInterval = null

// 计算属性
const subtotal = computed(() => {
  return orderItems.value.reduce((sum, item) => sum + (item.price * item.quantity), 0)
})

const shippingFee = computed(() => {
  return subtotal.value >= 88 ? 0 : 10
})

const discount = computed(() => {
  let discount = 0
  if (subtotal.value >= 100) {
    discount = subtotal.value * 0.1
  }
  return discount
})

const totalAmount = computed(() => {
  return subtotal.value + shippingFee.value - discount.value
})

// 方法
const getCategoryName = (category) => {
  const categories = {
    vegetable: '蔬菜',
    fruit: '水果',
    egg: '禽蛋'
  }
  return categories[category] || category
}

const getPaymentMethodName = (paymentId) => {
  const method = paymentMethods.value.find(m => m.id === paymentId)
  return method ? method.name : ''
}

const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}

const startPaymentTimer = () => {
  if (timerInterval) {
    clearInterval(timerInterval)
  }
  
  timerInterval = setInterval(() => {
    if (paymentTimer.value > 0) {
      paymentTimer.value--
    } else {
      clearInterval(timerInterval)
      handleOrderTimeout()
    }
  }, 1000)
}

const handleOrderTimeout = () => {
  ElMessage.warning('订单支付超时，已自动取消')
  router.push('/buyer/orders')
}

const handleSubmitOrder = async () => {
  if (!selectedAddressId.value) {
    ElMessage.error('请选择收货地址')
    return
  }

  isSubmitting.value = true
  
  try {
    // 模拟API调用创建订单
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    showPaymentDialog.value = true
    startPaymentTimer()
    
  } catch (error) {
    ElMessage.error('提交订单失败，请重试')
  } finally {
    isSubmitting.value = false
  }
}

const confirmPayment = () => {
  clearInterval(timerInterval)
  ElMessage.success('支付成功！')
  showPaymentDialog.value = false
  router.push('/buyer/orders')
}

const cancelPayment = () => {
  ElMessageBox.confirm('确定要取消支付吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '继续支付',
    type: 'warning'
  }).then(() => {
    clearInterval(timerInterval)
    showPaymentDialog.value = false
    ElMessage.info('已取消支付')
    // 这里可以调用API将订单状态改为待付款
  })
}

// 地址管理方法
const addNewAddress = () => {
  editingAddress.value = null
  addressForm.value = {
    recipient: '',
    phone: '',
    region: [],
    detail: '',
    isDefault: false,
    tag: '家', // 设置默认标签
    customTag: '' // 初始化自定义标签字段
  }
  showAddressEdit.value = true
}

// 修改编辑地址方法
const editAddress = (address) => {
  editingAddress.value = address
  addressForm.value = {
    recipient: address.recipient,
    phone: address.phone,
    region: [address.province, address.city, address.district],
    detail: address.detail,
    isDefault: address.isDefault,
    tag: address.tag,
    customTag: address.tag && !addressTags.value.includes(address.tag) ? address.tag : ''
  }
  showAddressEdit.value = true
}

// 修改保存地址方法
const saveAddress = async () => {
  try {
    await addressFormRef.value.validate()
    
    if (addressForm.value.region.length !== 3) {
      ElMessage.error('请选择完整的省市区')
      return
    }
    
    const [province, city, district] = addressForm.value.region
    const finalTag = addressForm.value.tag === '其他' && addressForm.value.customTag 
      ? addressForm.value.customTag 
      : addressForm.value.tag
    
    // 如果是自定义标签且不在标签列表中，添加到标签列表
    if (addressForm.value.tag === '其他' && addressForm.value.customTag && 
        !addressTags.value.includes(addressForm.value.customTag)) {
      addressTags.value.push(addressForm.value.customTag)
    }
    
    if (editingAddress.value) {
      // 更新地址
      const index = userAddresses.value.findIndex(addr => addr.id === editingAddress.value.id)
      if (index !== -1) {
        userAddresses.value[index] = {
          ...userAddresses.value[index],
          recipient: addressForm.value.recipient,
          phone: addressForm.value.phone,
          province,
          city,
          district,
          detail: addressForm.value.detail,
          isDefault: addressForm.value.isDefault,
          tag: finalTag
        }
      }
    } else {
      // 新增地址
      const newAddress = {
        id: Date.now(),
        recipient: addressForm.value.recipient,
        phone: addressForm.value.phone,
        province,
        city,
        district,
        detail: addressForm.value.detail,
        isDefault: addressForm.value.isDefault,
        tag: finalTag
      }
      userAddresses.value.push(newAddress)
    }
    
    // 处理默认地址
    if (addressForm.value.isDefault) {
      userAddresses.value.forEach(addr => {
        if (addr.id !== (editingAddress.value?.id || Date.now())) {
          addr.isDefault = false
        }
      })
    }
    
    showAddressEdit.value = false
    ElMessage.success(editingAddress.value ? '地址更新成功' : '地址添加成功')
  } catch (error) {
    console.error('保存地址错误:', error)
    ElMessage.error('请完善地址信息')
  }
}

// 添加标签样式方法
const getTagClass = (tag) => {
  const tagClasses = {
    '家': 'tag-home',
    '公司': 'tag-company',
    '学校': 'tag-school',
    '父母家': 'tag-parents',
    '其他': 'tag-other'
  }
  return tagClasses[tag] || 'tag-other'
}

const setDefaultAddress = (addressId) => {
  userAddresses.value.forEach(addr => {
    addr.isDefault = addr.id === addressId
  })
  ElMessage.success('默认地址设置成功')
}

const deleteAddress = (addressId) => {
  ElMessageBox.confirm('确定要删除这个地址吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userAddresses.value = userAddresses.value.filter(addr => addr.id !== addressId)
    ElMessage.success('地址删除成功')
  })
}

// 处理再次购买的订单
const handleBuyAgainOrder = (orderData) => {
  console.log('接收到再次购买订单:', orderData)
  
  // 将订单商品添加到购物车
  if (orderData.items && orderData.items.length > 0) {
    orderItems.value = orderData.items.map(item => ({
      id: item.productId || item.id,
      name: item.productName || item.name,
      price: item.price || 0,
      quantity: item.quantity || 1,
      weight: item.weight || 0.5,
      category: item.category || 'vegetable',
      image: item.image || 'https://images.unsplash.com/photo-1546470427-e212d0d553c3?w=300&h=200&fit=crop'
    }))
    
    ElMessage.success(`已添加 ${orderData.items.length} 件商品到订单`)
  }
}

// 生命周期
onMounted(() => {
  // 检查是否有传递的订单数据
  if (route.query.orderData) {
    try {
      const orderData = JSON.parse(route.query.orderData)
      handleBuyAgainOrder(orderData)
    } catch (error) {
      console.error('解析订单数据失败:', error)
    }
  }
  // 设置默认选中第一个地址
  const defaultAddress = userAddresses.value.find(addr => addr.isDefault)
  if (defaultAddress) {
    selectedAddressId.value = defaultAddress.id
  }
})

onUnmounted(() => {
  if (timerInterval) {
    clearInterval(timerInterval)
  }
})
</script>

<style scoped>
/* 标签徽章样式 */
.tag-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
  margin-left: 8px;
}

.tag-home {
  background: #10b981;
}

.tag-company {
  background: #3b82f6;
}

.tag-school {
  background: #f59e0b;
}

.tag-parents {
  background: #8b5cf6;
}

.tag-other {
  background: #6b7280;
}

/* 标签选择器样式 */
.tag-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tag-radio {
  margin-right: 16px;
}

/* 空地址样式调整 */
.empty-address {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.empty-text {
  color: #6b7280;
  margin-bottom: 20px;
}

.checkout-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.checkout-header {
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px 0;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.store-title {
  color: #10b981;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.leaf-icon {
  font-size: 20px;
}

.checkout-steps {
  display: flex;
  gap: 40px;
}

.step {
  color: #9ca3af;
  font-weight: 500;
  position: relative;
}

.step.active {
  color: #10b981;
  font-weight: 600;
}

.step:not(:last-child)::after {
  content: '›';
  position: absolute;
  right: -25px;
  color: #9ca3af;
}

.checkout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 30px;
}

.checkout-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.checkout-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

/* 地址管理相关样式 */
.manage-address-btn {
  margin-left: 10px;
  font-size: 14px;
}

.address-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.address-card {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.address-card:hover {
  border-color: #10b981;
}

.address-card.active {
  border-color: #10b981;
  background: #f0fdf4;
}

.address-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.recipient {
  font-weight: 600;
  color: #1f2937;
}

.phone {
  color: #6b7280;
}

.default-tag {
  background: #10b981;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.address-detail {
  color: #6b7280;
  line-height: 1.4;
}

.add-address-card {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 100px;
}

.add-address-card:hover {
  border-color: #10b981;
  color: #10b981;
}

.add-icon {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 8px;
}

.add-text {
  font-size: 14px;
}

.address-manager {
  max-height: 400px;
  overflow-y: auto;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 12px;
}

.address-item.default {
  border-color: #10b981;
  background: #f0fdf4;
}

.address-content {
  flex: 1;
}

.default-badge {
  background: #10b981;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 8px;
}

.address-actions {
  display: flex;
  gap: 8px;
}

.delete-btn {
  color: #ef4444;
}

.address-actions-footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

/* 收货信息样式 */
.address-form {
  max-width: 500px;
}

/* 订单商品样式 */
.order-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
}

.item-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.item-spec {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.item-quantity {
  color: #6b7280;
  font-weight: 500;
}

.item-price {
  font-size: 16px;
  font-weight: 600;
  color: #ef4444;
  min-width: 80px;
  text-align: right;
}

/* 订单备注样式 */
.order-notes {
  max-width: 500px;
}

/* 侧边栏样式 */
.checkout-sidebar {
  position: sticky;
  top: 30px;
  height: fit-content;
}

.order-summary {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.summary-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  color: #6b7280;
}

.summary-item.discount {
  color: #10b981;
}

.free-shipping {
  color: #10b981;
  font-weight: 500;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  margin-top: 8px;
  border-top: 1px solid #e5e7eb;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.total-amount {
  color: #ef4444;
  font-size: 24px;
}

/* 支付方式样式 */
.payment-methods {
  margin: 24px 0;
}

.payment-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-option:hover {
  border-color: #10b981;
}

.payment-option.active {
  border-color: #10b981;
  background: #f0fdf4;
}

.payment-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-info {
  flex: 1;
}

.payment-name {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.payment-desc {
  font-size: 12px;
  color: #6b7280;
}

.payment-radio {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.3s ease;
}

.radio-dot.active {
  background: #10b981;
}

/* 支付倒计时样式 */
.payment-timer {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 16px;
  margin: 20px 0;
  text-align: center;
}

.timer-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #ea580c;
  margin-bottom: 8px;
}

.timer-icon {
  font-size: 16px;
}

.timer-count {
  font-weight: 600;
  font-size: 16px;
  color: #dc2626;
}

.timer-warning {
  font-size: 12px;
  color: #9a3412;
}

/* 提交按钮样式 */
.submit-order-btn {
  width: 100%;
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* 支付对话框样式 */
.payment-dialog {
  text-align: center;
}

.payment-amount {
  font-size: 18px;
  margin-bottom: 12px;
}

.amount-label {
  color: #6b7280;
}

.amount-value {
  color: #ef4444;
  font-weight: 600;
  font-size: 24px;
}

.payment-method {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 20px;
}

.payment-tips {
  background: #f8fafc;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.payment-tips p {
  margin: 4px 0;
  color: #6b7280;
  font-size: 14px;
}

.payment-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* From Uiverse.io by vinodjangid07 */ 
.button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
  position: relative;
}

.svgIcon {
  width: 12px;
  transition-duration: 0.3s;
}

.svgIcon path {
  fill: white;
}

.button:hover {
  width: 140px;
  border-radius: 50px;
  transition-duration: 0.3s;
  background-color: rgb(181, 160, 255);
  align-items: center;
}

.button:hover .svgIcon {
  /* width: 20px; */
  transition-duration: 0.3s;
  transform: translateY(-200%);
}

.button::before {
  position: absolute;
  bottom: -20px;
  content: "Back to Top";
  color: white;
  /* transition-duration: .3s; */
  font-size: 0px;
}

.button:hover::before {
  font-size: 13px;
  opacity: 1;
  bottom: unset;
  /* transform: translateY(-30px); */
  transition-duration: 0.3s;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .checkout-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .checkout-sidebar {
    position: static;
  }
  
  .header-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .checkout-steps {
    gap: 20px;
    font-size: 14px;
  }
  
  .step:not(:last-child)::after {
    right: -15px;
  }
}

@media (max-width: 480px) {
  .checkout-section {
    padding: 16px;
  }
  
  .order-item {
    padding: 12px;
  }
  
  .item-image {
    width: 50px;
    height: 50px;
  }
  
  .payment-option {
    padding: 12px;
  }
}
</style>